<template>
  <div class="upload-page">
    <page-header-wrapper>
      <page-tab-list>
        <a-alert message="此配置用于上传图片或文件" type="info" show-icon style="margin:24px 0;" />
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="middle">
            <a-col class="required" :span="4" style="text-align: right"> 平台： </a-col>
            <a-col :span="16">
              <a-radio-group @change="changeRadio" v-model="type">
                <a-radio value="aliyun"> 阿里云OSS </a-radio>
                <a-radio value="qcloud"> 腾讯云COS </a-radio>
                <a-radio value="qiniu"> 七牛云存储 </a-radio>
                <a-radio value="local"> 本地存储 </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <template v-if="aliVisable">
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 存储空间名称（Bucket）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="aliyun.bucket" />
                <div style="font-size: 8px; margin-top: -20px">请设置存储空间为公共读</div>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> Endponit（或自定义域名）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="aliyun.domain" />
                <div style="font-size: 8px; margin-top: -20px">
                  例子：http://oss-cn-hangzhou.aliyuncs.com，请加上http://或https://，结尾不需要/
                </div>
              </a-col>
              <p style="position: relative; top: -10px; left: 11.5rem"><span style="font-size: 8px"></span></p>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 是否开启自定义域名： </a-col>
              <a-col :span="16">
                <a-radio-group @change="changeEndpointRadio" v-model="aliyun.CNAME">
                  <a-radio :value="'1'"> 开启 </a-radio>
                  <a-radio :value="'0'"> 关闭 </a-radio>
                </a-radio-group>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> Access Key ID： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="aliyun.access_key" />
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> Access Key Secret： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="aliyun.secret_key" />
              </a-col>
            </a-row>
            <!-- <a-row :gutter="[16,30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right;">
              图片样式接口（选填）：
            </a-col>
            <a-col :span="16">
              <a-input
                class="input-class"
                v-model="aliyun.style_api"
              />
              <div style="font-size: 8px;margin-top: -20px;">例子：sample.jpg?x-oss-process=style/stylename</div>
            </a-col>
          </a-row> -->
          </template>
          <template v-if="qcloudVisable">
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 存储空间名称（Bucket）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qcloud.bucket" />
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 默认域名： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qcloud.region" />
                <div style="font-size: 8px; margin-top: -20px">
                  例子：bucket-appid.cossh.myqcloud.com或者bucket-appid.cos.ap-shanghai.myqcloud.com
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 自定义域名： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qcloud.domain" />
                <div style="font-size: 8px; margin-top: -20px">
                  若没有设置，则不用填写。例子：http://abstehdsdw.bkt.clouddn.com，请加上http://或https://，结尾不需要/
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> SecretId： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qcloud.secret_id" />
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> SecretKey： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qcloud.secret_key" />
              </a-col>
            </a-row>
          </template>
          <template v-if="qiniuVisable">
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 存储地区： </a-col>
              <a-col :span="16">
                <a-radio-group v-model="qiniu.zone">
                  <a-radio value="0"> 华东 </a-radio>
                  <a-radio value="1"> 华北 </a-radio>
                  <a-radio value="2"> 华南 </a-radio>
                  <a-radio value="3"> 新加坡 </a-radio>
                  <a-radio value="4"> 北美 </a-radio>
                </a-radio-group>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 存储空间名称（Bucket）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qiniu.bucket" />
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 绑定域名（或测试域名）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qiniu.domain" />
                <div style="font-size: 8px; margin-top: -20px">
                  例子：http://abstehdsdw.bkt.clouddn.com，请加上http://或https://，结尾不需要/
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> AccessKey（AK）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qiniu.access_key" />
              </a-col>
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> SecretKey（SK）： </a-col>
              <a-col :span="16">
                <a-input class="input-class" v-model="qiniu.secret_key" />
              </a-col>
            </a-row>
            <!-- <a-row :gutter="[16,30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right;">
              图片样式接口（选填）：
            </a-col>
            <a-col :span="16">
              <a-input
                class="input-class"
                v-model="qiniu.style_api"
              />
              <div style="font-size: 8px;margin-top: -20px;">例子：imageView2/0/w/1080/h/1080/q/85|imageslim</div>
            </a-col>
          </a-row> -->
          </template>
          <a-row :gutter="[30, 30]" type="flex" align="middle">
            <a-col offset="10">
              <a-button type="primary" @click="onSave"> 保存 </a-button>
            </a-col>
          </a-row>
        </template>
      </page-tab-list>
    </page-header-wrapper>
  </div>
</template>
<script>
import { getUploadConfig, setUploadConfig } from '@/api/setting/upload'

export default {
  name: 'UploadConfig',
  components: {},
  data() {
    return {
      aliVisable: false,
      qiniuVisable: false,
      qcloudVisable: false,
      aliyun: {
        bucket: null,
        CNAME: null,
        domain: null,
        access_key: null,
        secret_key: null,
        style_api: null,
      },
      qiniu: {
        zone: '0',
        bucket: null,
        domain: null,
        access_key: null,
        secret_key: null,
        style_api: null,
      },
      qcloud: {
        bucket: null,
        region: null,
        domain: null,
        secret_id: null,
        secret_key: null,
      },
      type: 'local',
    }
  },
  async created() {
    await this.getData()
    if (this.type == 'local') {
      this.aliVisable = false
      this.qcloudVisable = false
      this.qiniuVisable = false
    }
  },
  methods: {
    changeEndpointRadio(e) {
      console.log(e.target.value)
      this.aliyun.CNAME = e.target.value
    },
    changeRadio(e) {
      this.type = e.target.value
      if (this.type === 'aliyun') {
        this.qiniuVisable = false
        this.qcloudVisable = false
        this.aliVisable = true
      }
      if (this.type === 'qcloud') {
        this.qiniuVisable = false
        this.aliVisable = false
        this.qcloudVisable = true
      }
      if (this.type === 'qiniu') {
        this.aliVisable = false
        this.qcloudVisable = false
        this.qiniuVisable = true
      }
      if (this.type === 'local') {
        this.aliVisable = false
        this.qcloudVisable = false
        this.qiniuVisable = false
      }
    },
    onSave() {
      const hide = this.$message.loading('提交中', 0)
      var params = {
        storage_type: this.type,
        qiniu: this.qiniu,
        qcloud: this.qcloud,
        aliyun: this.aliyun,
      }
      setUploadConfig(params).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: async function () {
      var params = {}
      await getUploadConfig(params).then((res) => {
        const data = res.data
        if (data.aliyun) {
          this.aliyun = data.aliyun
        }
        if (data.qcloud) {
          this.qcloud = data.qcloud
        }
        if (data.qiniu) {
          this.qiniu = data.qiniu
        }
        this.type = data.storage_type
        if (this.type === 'aliyun') {
          this.qiniuVisable = false
          this.qcloudVisable = false
          this.aliVisable = true
        }
        if (this.type === 'qcloud') {
          this.qiniuVisable = false
          this.aliVisable = false
          this.qcloudVisable = true
        }
        if (this.type === 'qiniu') {
          this.aliVisable = false
          this.qcloudVisable = false
          this.qiniuVisable = true
        }
        if (this.type === 'local') {
          this.aliVisable = false
          this.qcloudVisable = false
          this.qiniuVisable = false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.upload-page {
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
}
</style>
